{% extends 'offlandpage/base.html' %}
{% load staticfiles %}
{% block content %}
            
<h1>Forgot Password</h1>
<p>Please enter your email and then click <b>Reset Password</b>. Please check your email and follow the instructions found in the email.</p>
<br/>
<form enctype="multipart/form-data" name="forgot_password_form" id="forgot_password_form">
    {% for field in form %}
    <div class="row">
        <div class="form-group">
            <div class="fieldWrapper">
                <label class="col-sm-2 control-label">
                    {{ field.label }}
                </label>
                <div class="col-sm-10">
                    {{ field }}
                </div>
            </div>
        </div>
    </div>
    <br/>
    {% endfor %}
</form>
<br/>
<div class="row">
    <div class="form-group">
        <div class="col-sm-11">
            <button type="button"
                   class="btn btn-primary"
            data-dismiss="modal"
                    form="course_preview_form"
                 onclick="ajax_reset_password();">
                <i class="fa fa-times"></i> Reset Password
            </button>
        </div>
    </div>
</div>
<br/>
<div id="error_box" name="error_box" class="alert alert-danger alert-dismissable" hidden="true">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    ERROR: This is to be filled in by the "print_error" function. If you see this message that means there's an error with your javascript somewhere.
</div>
<div id="success_box" name="success_box" class="alert alert-success alert-dismissable" hidden="true">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    Password has been successfully reset and an email was to your account.
</div>

<!----------------------------------------------------------------------------->

<!-- Modal -->
<div id="ajax_modal_placeholder"
   name="ajax_modal_placeholder"></div>
<!-- end modal -->

<!----------------------------------------------------------------------------->

<script>
    function ajax_reset_password()
    {
        var url = 'reset_password';
        $.ajax( url, {
            data: {
               'email': $('#id_email').val(),
               'captcha_0': $('#id_captcha_0').val(),
               'captcha_1': $('#id_captcha_1').val(),
               'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            type: 'POST',
            success: function(json_result) {
               // success code execution here
               if (json_result.status == "success")
               {
                    $('#success_box').prop("hidden", false);
                    $('#error_box').prop("hidden", true);
               }
               else
               {
                    refresh_captcha();
           
                    // Make the hidden error box appear and display error.
                    print_error(json_result.message);
               }
            },
            error: function(xhr,status,error) {
               // error code here
               refresh_captcha();
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }

    /**
     * Prints a error box with the contents of the errors received from the server.
     */
    function print_error(json_result)
    {
        $('#error_box').prop("hidden", false); // Display error box.
    
        try
        {
            // Iterate through the JSON array of arrays and generate an error string.
            var message = "<b>Error(s):</b><hr/>";
            var data = $.parseJSON(json_result)
            for (var key in data) {
                if (data.hasOwnProperty(key)) { // this will check if key is owned by data object and not by any of it's ancestors
                    message += "<p>" + key + ": " + data[key] + "<p>";
                }
            }
            
            // Replace the error string with the contents of the error box.
            $('#error_box').html(message);
        }
        catch(e)
        {
            // Replace the error string with the contents of the error box.
            $('#error_box').html("<b>Error:</b> " + json_result);
        }
    }

    /**
     * The following function will cause the captcha to refresh.
     */
    function refresh_captcha()
    {
        var url = location.protocol + "//" + window.location.hostname + ":"
        + location.port + "/captcha/refresh/";
    
        // Make the AJAX-call
        $.getJSON(url, {}, function(json) {
            //var $form = $('modal-body').parents('register_form');
            var $form = $('#forgot_password_form');
            $form.find('input[name="captcha_0"]').val(json.key);
            $form.find('img.captcha').attr('src', json.image_url);
        });
              
        return false;
    }

    // Add refresh button after field (this can be done in the template as well)
    $('img.captcha').after(
        $('<a href="#void" class="captcha-refresh">Refresh</a>')
    );
                       
    // Click-handler for the refresh-link
    $('.captcha-refresh').click(function(){
        refresh_captcha();
    });
</script>
{% endblock content %}